<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      title="请选择"
      :close-on-click-modal="false"
      append-to-body
      width="1000px"
    >
      <div>
        <el-form ref="form" :model="equipment" :inline="true">
          <el-form-item label="名称：">
            <el-input v-model="equipment.facilityName" placeholder="请输入名称" clearable @keyup.enter.native="getList"></el-input>
          </el-form-item>
          <el-form-item label="编码：">
            <el-input v-model="equipment.facilityCode" placeholder="请输入编码" clearable @keyup.enter.native="getList"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button type="primary" @click="getList">查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div>
        <el-table
          :data="list"
          height="500px"
          row-key="id"
          :header-cell-style="{
          background: '#f5f7fa',
        }"
          highlight-current-row
          @current-change="handleCurrentChange"
        >
          <el-table-column
            prop="facilityName"
            label="名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="facilityCode"
            label="编码"
            width="180">
          </el-table-column>
          <el-table-column
            prop="deptIdText"
            label="部门"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="model"
            label="型号"
            sortable
            width="180">
          </el-table-column>
          <el-table-column
            prop="statusText"
            label="状态">
          </el-table-column>
          <el-table-column
            prop="assetManager"
            label="负责人">
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-bottom: 5px">
        <pagination
          :total="total"
          :page.sync="page.pageNum"
          :limit.sync="page.pageSize"
          :page-sizes="[20, 50, 100, 500]"
          :page-size="20"
          @pagination="getList"
        />
      </div>

      <div slot="footer">
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>

</template>
<script>
  import {getListByNameAndCode} from "/src/views/core/equipment/facility_ResourceDetail/equipment"

  export default {
    inheritAttrs: false,
    props: ["visible"],
    data() {
      return {
        // 数据
        list: [],
        // 参数对象
        equipment: {
          facilityName: '',
          facilityCode: ''
        },
        // 分页参数
        page: {
          pageNum: 1,
          pageSize: 20
        },
        // 分页总数据条数
        total: 0,

        // 单选表格选中的数据
        item:{}
      }
    },
    created() {
    },
    methods: {
      // 页面打开
      onOpen() {
        this.getList();
      },
      // 页面关闭
      onClose() {
        this.$emit("update:visiblea", false);
      },
      // 数据获取
      getList() {
        getListByNameAndCode(this.equipment, this.page).then((res) => {
          if (res.code === 200) {
            this.list = res.rows;
            this.total = res.total;
          } else {
            this.$message.error(res.message);
          }
        });
      },
      // 单选选中数据获取
      handleCurrentChange(val){
        this.item = val;
      },
      // 确定
      submit(){
        this.$emit("Ok",this.item);
      }
    }
  }
</script>
<style>

</style>
